<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <el-select popper-class="ft-customer-select" :disabled="disabled"
                   v-if="editable" v-model="projectInfo" value-key="projectApprovalId"
                   :placeholder="placeholder" filterable
                   @change="selectCustomer" :clearable="clearable"
                   :popper-append-to-body="popperAppendToBody" >
            <el-option
                v-for="item in projectList"
                :key="item.projectApprovalId"
                :label="item.projectApprovalName"
                :title="item.projectApprovalName"
                :value="item">
                <span>{{item.projectApprovalName}}</span>
                <div style='color:#8492a6'>
                    <span>{{item.projectApprovalCode}}</span>
                </div>
            </el-option>
        </el-select>
        <span v-if="!editable&&projectInfo">{{projectInfo.projectApprovalName}}</span>
    </div>
</template>

<script>
export default {
    name: "FtProjectSelect",
    props: {
        placeholder: {
            type: String,
            default: '请选择'
        },
        value: {
            type: String
        },
        editable: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: false
        },
        popperAppendToBody: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        this.request()
    },
    data() {
        return {
            projectList: [],
            projectInfo: null,
            projectApprovalId: this.value
        }
    },
    methods: {
        request(filter) {
            this.loading = true
            let url = "/joys-rest/ncls-bms/project/query/"
            this.$http.post(url,filter).then(resp => {
                this.projectList = resp.body
                this.merge()
            }).catch(err => {
                if(err.body) {
                    this.$message.error(err.body.message || "查询失败！")
                } else {
                    this.$message.error("查询失败！")
                }
            }).finally(() => {
                this.loading = false
            })
        },
        loadInfo() {
            this.projectInfo = null
            if (this.projectApprovalId) {
                const url = '/joys-rest/ncls-bms/project/custInfo/' + this.projectApprovalId
                this.$http.get(url).then(resp => {
                    this.projectInfo = resp.body
                    this.merge()
                }, resp => {
                    this.$message.error(resp.body.message)
                })
            }
        },
        selectCustomer() {
            this.projectApprovalId = this.projectInfo.projectApprovalId
            this.$emit('input', this.projectInfo.projectApprovalId)
            this.$emit('change', this.projectInfo)
        },
        merge() {
            const found = this.projectList && this.projectList.find(project => {
                return project.projectApprovalId === this.projectApprovalId
            })
            if (!found && this.projectInfo) {
                this.projectList = (this.projectList || [])
                this.projectList.push(this.projectInfo)
            }
        },
        dataModify(){
            this.projectInfo = {}
        }
    },
    watch: {
        value(newVal) {
            this.projectApprovalId = newVal
            this.loadInfo()
        }
    }
}
</script>

<style>
.ft-customer-select .el-select-dropdown__item {
    padding: 4px 20px;
    font-size: 14px;
    line-height: 21px;
    height: auto;
}
</style>
